<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_动态伪类</title>
    <style>
      /* 注意:这四个效果的顺序不能更改一旦更改效果会被覆盖 */
      /* link 选中未访问过的a标签 */
      a:link {
        color:orange;
      }
      /*已经访问过的a标签*/
      a:visited {
        color: skyblue;
      }
      /* 鼠标放在a标签上展示颜色 */
      a:hover {
        color: green;
      }
      /* 鼠标点在a标签上的未松开的效果 */
      a:active {
        color: gold;
      }

      input:focus,select:focus {
        background-color: green;
        color: orange;
      }
    </style>
</head>
<body>
  <a href="https://www.baidu.com">去百度</a>
  <a href="https://www.jd.com">去京东</a>
  <br>
  <input type="text">
  <br>
  <input type="text">
  <br>
  <input type="text">
  <select>
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
    <option value="chnegdu">成都</option>
  </select>
</body>
</html>